<template>
  <div id="fan">
      <div class="bo" @mousedown="drag"   draggable="true">111</div>
      <div class="p3d">
         <photo></photo>
         <div> 相册</div>
      </div>
      <div class="ggk">
         <gua></gua>
      </div>
      
  </div>
</template>

<script>
import photo from './group/3dphoto.vue'
import gua from './group/gua.vue'
export default {
components:{
  photo,gua
},
setup(){
  let drag=(en)=>{
     let offsetx=en.offsetX
     let offsety=en.offsetY
     en.target.ondragend=function(e){
       let x=e.clientX-offsetx
       let y=e.clientY-offsety
       e.target.style.top=y+'px'
       e.target.style.left=x+'px'
     }

  }
  


  return {
    drag
  }
}
}
</script>

<style scoped lang="less">
.bo{
  position:fixed;
  top:300px;
  right:200px;
  width:100px;
  height:100px;
  border:1px solid red;
  color: aliceblue;
  z-index: 999;
}
#fan{
   display: flex;
   padding: 10px;
   .p3d{
     margin: 0 20px 10px 0;
   }
}
</style>